<template>
    <keep-alive :include="cachedViews">
        <!-- <div :is="currentView"></div> -->
        <div>
            <div class="app-container clearfix pageHeader">
                <div class="header fl">{{$route.meta.title}}</div>
            </div>
            <div class="app-container margin-content padding-content">
                <el-form :inline="true" :model="form" class="demo-form-inline">
                    <el-form-item label="运输方式">
                        <el-select v-model="form.trafMode" placeholder="请选择运输方式" >
                            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="企业名称">
                        <el-input change-on-select v-model="form.entName" placeholder="请输入企业名称">
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="doSearch">查询</el-button>
                        <el-button @click="resetForm">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="app-container margin-content padding-content">
                <el-table :height="scrollHeight" :key="tableKey" :data="list" v-loading="listLoading" element-loading-text="正在加载..." style="width: 100%">
                    <!-- <el-table-column type="selection" width="55"></el-table-column> -->
                    <el-table-column label="序号" type="index"></el-table-column>
                    <el-table-column label="所属地区" property="region"></el-table-column>
                    <el-table-column label="统一信用代码" property="creditCode"></el-table-column>
                    <el-table-column label="运输方式" property="trafMode"></el-table-column>
                    <el-table-column label="企业名称" property="entName"></el-table-column>
                    <el-table-column label="联系人" property="contactPerson"></el-table-column>
                    <el-table-column label="联系电话" property="contactTel"></el-table-column>
                    <el-table-column label="邮箱" property="email"></el-table-column>
                    <el-table-column label="通讯地址" property="addr"></el-table-column>
                </el-table>
                <div class="pagination-container align-right">
                    <el-pagination background :current-page="page.pageNum" v-if="isShow" :page-size="page.pageSize" :total="total" @current-change="handleCurrentChange" layout="total,prev, pager, next, jumper">
                    </el-pagination>
                </div>
            </div>
    
    
        </div>
    </keep-alive>
</template>

<script>
    import {
        getTrafModeList
    } from '@/api/enterpriseTransport'
    export default {
        name: 'enterpriseTransport',
        data() {
            return {
                form: {
                    trafMode: '',
                    entName: ''
                },
                options: [{
                    id: "0",
                    name: "非保税区"
                }, {
                    id: "1",
                    name: "监管仓库"
                }, {
                    id: "2",
                    name: "水路运输"
                }, {
                    id: "3",
                    name: "铁路运输"
                }, {
                    id: "4",
                    name: "公路运输"
                }, {
                    id: "5",
                    name: "航空运输"
                }, {
                    id: "6",
                    name: "邮件运输"
                }, {
                    id: "7",
                    name: "保税区"
                }, {
                    id: "8",
                    name: "保税仓库"
                }, {
                    id: "9",
                    name: "其他方式运输"
                }, {
                    id: "H",
                    name: "边境特殊海关作业区"
                }, {
                    id: "T",
                    name: "综合实验区"
                }, {
                    id: "W",
                    name: "物流中心"
                }, {
                    id: "X",
                    name: "物流园区"
                }, {
                    id: "Y",
                    name: "保税港区"
                }, {
                    id: "Z",
                    name: "出口加工区"
                }, {
                    id: "L",
                    name: "旅客携带"
                }, {
                    id: "G",
                    name: "固定设施运输"
                }],
                scrollHeight: null,
                page: {
                    pageNum: 1,
                    pageSize: 20
                },
                total: 0,
                enterpriseName: null,
                tableKey: 0,
                listLoading: false,
                list: [],
                isShow: false,
                saveSetTimeoutSearch: null
            }
        },
        computed: {
            // currentView(){
            //   return this.view[this.index]
            // },
            cachedViews() {
                return this.$store.state.tagsView.cachedViews
            }
        },
        methods: {
            tableResize() {
                const _height = 320
                this.scrollHeight = document.body.scrollHeight - _height
                window.onresize = () => {
                    this.scrollHeight = document.body.scrollHeight - _height
                }
            },
            getList() {
                this.listLoading = true
                this.isShow = false
                let params = {
                    trafMode: this.form.trafMode,
                    entName: this.form.entName,
                    pageNum: this.page.pageNum,
                    pageSize: this.page.pageSize
                }
    
                getTrafModeList(params).then((res) => {
                    console.log(res.data)
                    if (res.data.code === 200) {
                        this.isShow = true
                        //   res = res.data
                        this.list = res.data.data.dataList !== '' ? res.data.data.dataList : []
                        this.total = res.data.data.total !== '' ? res.data.data.total : 0
                        this.listLoading = false
                    }
    
                })
            },
            // 页码查询
            handleCurrentChange(val) {
                this.page.pageNum = val
                this.getList()
            },
            doSearch() {
                this.page.pageNum = 1
                this.getList()
            },
            resetForm() {
                this.form = {
                    entName: '',
                    trafMode: '',
                }
            }
        },
        created() {
            this.tableResize()
            this.getList()
        },
    }
</script>
